<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>组合面板</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            带表格的面板
                        </div>
                        <table class="table  table-hover">
                            <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>姓</th>
                                    <th>名</th>
                                    <th>用户名</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</t>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</t>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>3</t>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                <tr>
                                    <td>4</t>
                                    <td>Lily</td>
                                    <td>wells</td>
                                    <td>@lily</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            带表格的面板
                        </div>
                        <div class="panel-body">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>姓</th>
                                        <th>名</th>
                                        <th>用户名</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</t>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <td>2</t>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                    <tr>
                                        <td>3</t>
                                        <td>Larry</td>
                                        <td>the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            带表格的面板
                        </div>
                        <div class="panel-body">
                            这里是面板内容区域
                        </div>
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>姓</th>
                                    <th>名</th>
                                    <th>用户名</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</t>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</t>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>3</t>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            列表组面板
                        </div>
                        <ul class="list-group">
                            <li class="list-group-item">
                                分组数据一
                                <badge class="badge badge-primary">10</badge>
                            </li>
                            <li class="list-group-item">
                                分组数据二
                                <badge class="badge badge-warning">20</badge>
                            </li>
                            <li class="list-group-item">
                                分组数据三
                                <badge class="badge badge-success">58</badge>
                            </li>
                            <li class="list-group-item">
                                分组数据四
                                <badge class="badge badge-danger">58</badge>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            列表组面板
                        </div>
                        <div class="list-group ">
                            <a class="list-group-item">
                                <H4 class="list-group-item-heading">
                                    春日
                                </H4>
                                <p class="list-group-item-text">
                                    胜日寻芳泗水滨，无边光景一时新。
                                </p>
                                <p class="list-group-item-text">
                                    等闲识得东风面，万紫千红总是春。
                                </p>
                            </a>
                            <a class="list-group-item ">
                                <H4 class="list-group-item-heading">
                                    望庐山瀑布
                                </H4>
                                <p class="list-group-item-text">
                                    日照香炉生紫烟，遥看瀑布挂前川。
                                </p>
                                <p class="list-group-item-text">
                                    飞流直下三千尺，疑是银河落九天。
                                </p>
                            </a>

                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            列表组面板
                        </div>
                        <div class="list-group ">
                            <a class="list-group-item list-group-item-danger">
                                <H4 class="list-group-item-heading">
                                    春日
                                </H4>
                                <p class="list-group-item-text">
                                    胜日寻芳泗水滨，无边光景一时新。
                                </p>
                                <p class="list-group-item-text">
                                    等闲识得东风面，万紫千红总是春。
                                </p>
                            </a>
                            <a class="list-group-item list-group-item-success">
                                <H4 class="list-group-item-heading">
                                    望庐山瀑布
                                </H4>
                                <p class="list-group-item-text">
                                    日照香炉生紫烟，遥看瀑布挂前川。
                                </p>
                                <p class="list-group-item-text">
                                    飞流直下三千尺，疑是银河落九天。
                                </p>
                            </a>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="panel">
                        <div class="nav-tabs-default">
                            <ul class="nav nav-tabs ">
                                <li class="active">
                                    <a href="#tab1" data-toggle="tab">用户管理</a>
                                </li>
                                <li>
                                    <a href="#tab2" data-toggle="tab">配置管理</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                        更多选项
                                        <i class="fa fa-caret-down"></i>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#tab3" data-toggle="tab">系统设置</a>
                                        </li>
                                        <li>
                                            <a href="#tab4" data-toggle="tab">菜单设置</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="tab-content panel-body">
                                <div class="tab-pane active" id="tab1">
                                    用户管理
                                </div>
                                <div class="tab-pane" id="tab2">
                                    配置管理
                                </div>
                                <div class="tab-pane" id="tab3">
                                    系统设置
                                </div>
                                <div class="tab-pane" id="tab4">
                                    菜单设置
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            默认Tab选项卡组合
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="nav-tabs-card">
                            <ul class="nav nav-tabs ">
                                <li class="active">
                                    <a href="#tab11" data-toggle="tab">用户管理</a>
                                </li>
                                <li>
                                    <a href="#tab12" data-toggle="tab">配置管理</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                        更多选项
                                        <i class="fa fa-caret-down"></i>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#tab13" data-toggle="tab">系统设置</a>
                                        </li>
                                        <li>
                                            <a href="#tab14" data-toggle="tab">菜单设置</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="tab-content panel-body">
                                <div class="tab-pane active" id="tab11">
                                    用户管理
                                </div>
                                <div class="tab-pane" id="tab12">
                                    配置管理
                                </div>
                                <div class="tab-pane" id="tab13">
                                    系统设置
                                </div>
                                <div class="tab-pane" id="tab14">
                                    菜单设置
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            卡片Tab选项卡组合
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="nav-tabs-easy">
                            <ul class="nav nav-tabs ">
                                <li class="active">
                                    <a href="#tab21" data-toggle="tab">用户管理</a>
                                </li>
                                <li>
                                    <a href="#tab22" data-toggle="tab">配置管理</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                        更多选项
                                        <i class="fa fa-caret-down"></i>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#tab23" data-toggle="tab">系统设置</a>
                                        </li>
                                        <li>
                                            <a href="#tab24" data-toggle="tab">菜单设置</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="tab-content panel-body">
                                <div class="tab-pane active" id="tab21">
                                    用户管理
                                </div>
                                <div class="tab-pane" id="tab22">
                                    配置管理
                                </div>
                                <div class="tab-pane" id="tab23">
                                    系统设置
                                </div>
                                <div class="tab-pane" id="tab24">
                                    菜单设置
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            简易风格Tab选项卡组合
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel-group">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <div data-toggle="collapse" href="#collapse1">点击展开/折叠面板内容</div>
                            </div>
                            <div id="collapse1" class="collapse">
                                <div class="panel-body">
                                    <p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-success">
                            <div class="panel-heading">
                                <div data-toggle="collapse" href="#collapse2">点击展开/折叠面板内容</div>
                            </div>
                            <div id="collapse2" class="collapse in">
                                <div class="panel-body">
                                    <p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                <div data-toggle="collapse" href="#collapse3">点击展开/折叠面板内容</div>
                            </div>
                            <div id="collapse3" class="collapse">
                                <div class="panel-body">
                                    <p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel-group" id="parentPanel">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <div data-toggle="collapse" href="#collapse11" data-parent="#parentPanel">手风琴风格-点击展开/折叠面板内容</div>
                            </div>
                            <div id="collapse11" class="collapse in">
                                <div class="panel-body">
                                    <p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-success">
                            <div class="panel-heading">
                                <div data-toggle="collapse" href="#collapse12" data-parent="#parentPanel">手风琴风格-点击展开/折叠面板内容</div>
                            </div>
                            <div id="collapse12" class="collapse">
                                <div class="panel-body">
                                    <p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                <div data-toggle="collapse" href="#collapse13" data-parent="#parentPanel">手风琴风格-点击展开/折叠面板内容</div>
                            </div>
                            <div id="collapse13" class="collapse">
                                <div class="panel-body">
                                    <p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>